<template>
	<view>
		<view :style="'background-image: url('+get_img+bgFunc()+');'" class="image"></view>
		<view>



			<view class="title" style="padding-top: 60rpx;">预约看房</view>
			<view>
				<image style="width: 750rpx;height: 300rpx;margin-top: 30rpx;" :src="get_img+sys.identification_bg">
				</image>
			</view>
			<button v-if="!user.phone&&show==true" open-type="getPhoneNumber" @getphonenumber="getphone"
				class="book_img" :style="'background-image: url('+get_img+sys.booking_bt+');'"></button>
			<button v-if="user.phone&&show==false" @click="application()" class="book_img"
				:style="'background-image: url('+get_img+sys.booking_bt+');'">
			</button>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sys: {},
				user: {},
				show: true,
				get_img: this.$get_img
			}
		},
		onLoad() {
			this.sys = uni.getStorageSync("sys")
			this.user = uni.getStorageSync("user")
		},
		methods: {
			bgFunc() {
				return this.sys.appointment_bg != '' ? this.sys.appointment_bg : this.sys.sys_background
			},
			application() {
				let data = {
					name: this.user.nickname,
					phone: this.user.phone
				}
				let that = this
				this.$model.post("user/appointment/appointment", data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "已预约"
						})
						that.show = false
					}
				})
			},
			// #ifdef MP-WEIXIN
			getphone(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
				 success: function(loginRes) {

						let data = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: loginRes.code,
							type: "application"
						}
						that.$model.post("auth/bind_model", data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: "预约成功"
								})
								that.show = false
							}
						})
					}
				});
			}
			// #endif
			
			// #ifdef MP-TOUTIAO
			getphone(e) {
				let that = this;
				uni.login({
					provider: 'toutiao',
				 success: function(loginRes) {
			
						let data = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: loginRes.code,
							type: "application"
						}
						that.$model.post("auth/dy_bind_phone", data).then(res => {
							if (res.code == 200) {
								uni.showToast({
									title: "预约成功"
								})
								that.show = false
							}
						})
					}
				});
			}
			// #endif
		}
	}
</script>

<style>
	.input {
		margin-left: 15rpx;
		padding-left: 45rpx;
		width: 480rpx;
		height: 70rpx;
		border: 1rpx dashed #fff;
		margin-top: 30rpx;
		border-radius: 20px;
	}

	.image {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-attachment: fixed;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
	}


	.title {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		letter-spacing: 10rpx;
		font-size: 45rpx;
	}

	.infor {
		color: #b3b3b3;
		padding-top: 30rpx;
		letter-spacing: 10rpx;
	}

	.book_img {
		height: 480rpx;
		margin: 100rpx;
		border-radius: 10px;
		margin-top: 40rpx;
		background-size: 100% 100%;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.book {
		background-color: rgba(255, 255, 255, 0.3);
		margin: 100rpx;
		border-radius: 10px;
		margin-top: 40rpx;

	}

	.book_bt {
		color: #fff;
		background-color: #6A5AE0;
		border-radius: 0 0 15px 15px;
	}

	.button {
		background-color: cornflowerblue;
		color: #fff;
		margin-top: 50rpx;
		border-radius: 0 0 10px 10px;
		height: 90rpx;
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		font-size: 40rpx;
		letter-spacing: 20rpx;
	}
</style>
